import React, { Component } from 'react';
import 'bootstrap/dist/css/bootstrap.css';
import axios from 'axios';
import TwoLines from './stockChart';

class StockData extends React.Component {
    constructor(props) {
        super(props);
    }
    render() {
        return (
            this.props.stocks.map((stock, i) => {
                return (
                    <tr key={stock.symbol} className="text-center">
                        <td>{stock.symbol}</td>
                        <TwoLines p5={stock.p5} t5={stock.t5} p15={stock.p15} t15={stock.t15}/>
                       
                    </tr>
                )

            })
        )
    }
}
class StockList extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            stocks: [{'symbol': 'SH600360', 'p5': [2.2, 2.3, 2.26, 2.27, 2.6, 2.34, 3.54, 3.28, 2.32, 2.37, 2.86, 2.82, 5.33, 2.81, 2.28, 2.53, 3.39, 2.06, 2.04, 2.24, 2.18, 2.29], 't5': [1634262780, 1634262840, 1634262900, 1634263020, 1634263080, 1634263140, 1634263260, 1634263320, 1634264640, 1634264700, 1634264820, 1634264880, 1634265960, 1634266200, 1634275440, 1634275980, 1634276220, 1634280660, 1634280720, 1634280840, 1634280900, 1634281020], 'p15': [2.27, 2.3, 3.0, 3.03, 3.07, 2.85, 2.8, 2.04, 2.34, 2.67, 2.06, 3.9, 3.74, 2.15, 2.2, 2.17, 2.53], 't15': [1634263080, 1634263140, 1634263260, 1634263320, 1634263560, 1634263740, 1634263800, 1634264700, 1634264820, 1634265180, 1634265660, 1634266200, 1634266680, 1634276280, 1634276760, 1634280840, 1634281020]}],
            isLoaded: true,
        }
    }

    // componentDidMount() {
    //     const _this = this;
    //     axios.get('https://5b5e71c98e9f160014b88cc9.mockapi.io/api/v1/lists')
    //         .then(function (response) {
    //             _this.setState({
    //                 users: response.data,
    //                 isLoaded: true
    //             });
    //         })
    //         .catch(function (error) {
    //             console.log(error);
    //             _this.setState({
    //                 isLoaded: false,
    //                 error: error
    //             })
    //         })

    // }

    render() {
        if (!this.state.isLoaded) {
            return <div>Loading</div>
        } else {
            return (
                <table className="table table-bordered">
                    <thead>
                        <tr>
                            <th className="text-center">symbol</th>
                            <th className="text-center">p5</th>
                            <th className="text-center">p15</th>
                        </tr>
                    </thead>
                    <tbody>
                        <StockData stocks={this.state.stocks} />
                    </tbody>
                </table>
            )
        }
    }
}

export default StockList;

